<template>
  <div class="member-card-content">
    <div class="card-content">
      <div class="title" style="padding-top: 0px;">
      <p> </p>
      </div>

      <div v-if="dealRecordData">

        <scroller lock-x :scrollbar-y=false @on-scroll-bottom="onScrollBottom">
          <div class="box1">

            <div class="card-info-item" style="margin-top: 0.266667rem" v-for="item in list">
              <div class="left">
                <p class="card-text">卡号：{{item.mb_card_no}}</p>
                <p class="last-used-time" style="font-size: 0.267rem;margin-top: 0.133333rem">交易时间：
                  {{item.trade_date}} {{item.trade_time}}</p>
              </div>

              <div class="right">
                <p class="price" style="width: 1.733333rem;">
                  <span class="total" style="float: right; margin-top: 0.266667rem;">￥{{(item.bank_amt / 100).toFixed(2)}}</span>

                  <span v-if="item.chnl_user_pay"
                        style="text-decoration: line-through;color: #949494;font-size: .267rem;float: right;
                    margin-top: 0.266667rem;padding-top: 0px;padding-left: 0.266667rem">
                    {{(item.chnl_user_pay).toFixed(2)}}
                  </span>

                  <span v-else
                        style="text-decoration: line-through;color: #949494;font-size: .267rem;float: right;
                    margin-top: 0.266667rem;padding-top: 0px;padding-left: 0.266667rem">
                  </span>

                  <span style="clear: both;"></span>
                </p>
              </div>

              <div class="clear"></div>
            </div>
          </div>
          <p style="text-align: center">已经到底了</p>
        </scroller>


      </div>

      <div class="weui-msg" v-else>
        <div class="weui-msg__icon-area"><i class="weui-icon-warn weui-icon_msg" style="color: #0eadfe;"></i></div>
        <div class="weui-msg__text-area">
          <h2 class="weui-msg__title">提示</h2>
          <p class="weui-msg__desc">暂无交易流水</p>
        </div>
        <div class="weui-msg__opr-area">
          <p class="weui-btn-area">
            <a href="javascript:history.back();" class="weui-btn weui-btn_default"
               style="background-color: #fff;color: #ff6600;width: 9.253333rem;text-align: center;font-size: 0.426667rem;">返回</a>
          </p>
        </div>
      </div>

    </div>

    <loading :show="showLoading" :text="showLoadingText"></loading>
    <toast v-model="showToast" width="5rem" :type="toastType" :time="800" :text="toastText"></toast>

  </div>
</template>
<script>
  import {Scroller, Loading, Toast} from 'vux'

  import {utils} from './../common/utils/utils'
  import {oauth} from './../common/utils/oauth'

  const common = require('./../common/utils/common')

  export default {
    components: {
      Scroller,
      Loading,
      Toast
    },
    data() {
      return {
        mchCodeByUrl: common.getUrlParam('mchCode'),
        openidByUrl: common.getUrlParam('openid'),
        cacheMchCode: localStorage.getItem('mchCode'),
        cacheMchType: localStorage.getItem('type'),
        openid: localStorage.getItem('openid'),

        dealRecordData: true,
        list: [],

        pageNum: 1,

        onFetching: false,
        bottomCount: 20,

        showMask: false,
        showLoading: false,
        showLoadingText: '',
        showToast: false,
        toastType: 'cancel',
        toastText: '',
      }
    },
    beforeCreate() {
      document.title = '我的交易流水'
    },
    async created() {
      const _this = this

      this.showLoading = true
      //授权
      oauth.checkOauth(utils, _this)

      const result = await utils.dealRecord(_this)

      if (result.code === 200) {
        this.showLoading = false
        if (result.values.list.length !== 0) {
          this.list = result.values.list
          this.dealRecordData = true
          _this.pageNum++
        } else {
          this.dealRecordData = false
        }
      }
    },
    methods: {
      async onScrollBottom() {

        const _this = this

        if (_this.onFetching) {

        } else {
          this.onFetching = true
          const result = await utils.dealRecord(_this)

          if (result.code === 200) {
            if (result.values.list.length !== 0) {
              _this.list = _this.list.concat(result.values.list)
              _this.pageNum++
              _this.onFetching = false
            }
          } else {
            alert(result['msg'])
          }
        }
      },

    }
  }
</script>
<style scoped>
  @import "~weui";

  .clear {
    clear: both;
  }

  .weui-btn:after {
    border-color: #ff6600;
  }

  .member-card-content {
    background-color: #F2F2F2;
    min-height: 17.787rem;
  }

  .member-card-content .card-content .title {
    padding: 0 0.4rem 0 0.4rem;
  }

  .member-card-content .card-content .title p {
    line-height: 0.933rem;
    font-size: 0.427rem;
  }

  .member-card-content .card-content .card-info-item {
    margin-bottom: 0.267rem;
    padding: 0.267rem 0.4rem 0.267rem 0.4rem;
    background-color: #fff;
    border-top: 0.027rem solid #ddd;
    border-bottom: 0.027rem solid #ddd;
  }

  .member-card-content .card-content .card-info-item .left {
    float: left;
  }

  .member-card-content .card-content .card-info-item .left .card-text {
    font-size: 0.427rem;
    line-height: 0.667rem;
  }

  .member-card-content .card-content .card-info-item .right {
    float: right;
    font-size: 0.427rem;
    text-align: right;
    margin-left: 0.667rem;
  }

  .member-card-content .card-content .card-info-item .right .price span {
    /*margin-right: 0.533rem;*/
  }

  .member-card-content .card-content .card-info-item .right .price i {
    color: #dedede;
  }

  .member-card-content .card-content .card-info-item .right .price .total {
    line-height: .333rem;
    text-align: right;
    color: #0F6F0F;
    font-size: 0.48rem;
  }

</style>
